import React, { CSSProperties, FC } from 'react'
import styled from "styled-components"
import * as echarts from 'echarts'
import { ECharts }  from 'echarts'
import { IPieChart, PieChartData } from '@/types/pages/salesAnalysis/interface'
import bg_verticle from '@/assert/images/salesAnalysis/bg_verticle.png'
import Title from '@/components/pages/title'
import { IDatePieChart } from '@/types/echart'

const ChartPie = styled.div`
    width: 100%;
    height: 100%;
    position: relative;
    background-image: url(${props=>props.style?.backgroundImage?props.style?.backgroundImage:bg_verticle});
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .content{
      position:absolute;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
      width: 90%;
      height: 90%;
    }

`
  const getOption =(myChart:ECharts,pieParams:IDatePieChart)=>{
    if(!pieParams.dataset){
      return {};
    }
    return {
    title: {
      text: '',
      left: 'center',
      textStyle: {
        color: '#fff',
        fontWeight: 'normal',
        fontSize: 14
      }
    },
    dataset:pieParams.dataset,
    legend: {
      // type: 'scroll',
      orient: 'horizontal',
      textStyle: {
        color: '#fff',
        fontWeight: 'normal',
        fontSize: 14,
        fontFamily:'MicrosoftYaHei'
      },
      bottom: 10,
      // data: pieParams.datas![0].map((val)=>val.name)
    },
    series: pieParams.dataset.source!.map((data, idx) => {
      let top = idx * 33.3;
      return {
        type: 'pie',
        radius: [50, 90],
        top: '15%',
        height: '66.33%',
        left: 'center',
        width: '100%',
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        label: {
          alignTo: 'edge',
          formatter:'{name|{b}}\n{d}%',
          minMargin: 10,
          edgeDistance: 10,
          lineHeight: 15,
          textStyle: {
            color: '#fff',
            fontWeight: 'normal',
            fontSize: 14,
            fontFamily:'MicrosoftYaHei'
          },
          rich: {
            time: {
              fontSize: 10,
              color: '#fff'
            }
          }
        },

        labelLine: {
          length: 15,
          length2: 0,
          maxSurfaceAngle: 80
        },
        labelLayout: function (params:any) {
          const isLeft = params.labelRect.x < myChart.getWidth() / 2;
          const points = params.labelLinePoints as number[][];
          // Update the end point.
          // points[2][0] = isLeft
          //   ? params.labelRect.x
          //   : params.labelRect.x + params.labelRect.width;

          return {
            labelLinePoints: points
          };
        },

      };
    })
  };
}


const Content: FC<IDatePieChart&{style?:CSSProperties}> = function (props) {
    let myEchart:ECharts;

    return (
        <ChartPie style={props.style}>
          <Title style={{paddingTop:props.style?.paddingTop}} name={props.title!} />
          <div className="content" ref={(ref)=>{
            if(ref){
              if(props.dataset){
                myEchart=echarts.init(ref)
                myEchart.setOption(getOption(myEchart,props));
              }
            }

        }} />
        </ChartPie>
    )
}

export default Content
